<template>
	<view class="container">
		<view class="user-section">

			<view class="user-info-box" @click="goPageWith('/pages/tabbar/tabbar-4/userSet')">

				<view class="portrait-box wxuser-info-box">
					<view class="wx-avatar portrait" v-if="userInfo.id>0">
            <image :src="userInfo.mn_avatar" mode="widthFix" alt="" v-if="userInfo.mn_avatar" />
            <image :src="'/static/images/avatar'+(userInfo.id)%4+'.png'" mode="widthFix" alt="" v-else />
<!--            <image :src="'/static/images/avatar2.png'" mode="widthFix" alt="" v-else />-->
<!--            <open-data type="userAvatarUrl" v-else></open-data>-->
          </view>
				</view>
				<view class="info-box text-white" v-if="uId>0">
<!--					<open-data type="userNickName"></open-data>-->
          <span v-if="userInfo.nick_name">{{userInfo.nick_name}}</span>
          <span v-else>{{names[(userInfo.id)%16]}}</span>
					<text class="etx height-20 ">已邀请好友：{{userInfo.rcount!=undefined&&userInfo.rcount>''?userInfo.rcount:0}}人</text>

				</view>
				<view class="info-box text-white" v-else>
					<text class="username" >游客</text>
					<text class="etx height-20 ">已邀请好友：请登录后查看</text>
				</view>
				<view class="right-btn" ></view>
			</view>

		</view>
		<view class="cover-container">

			<view class="cu-card dynamic">
				<view class="cu-item shadow">
					<view class="grid flex-sub padding col-1">
						<view class="content flex-sub flex-wrap">
							<view class="item-titel flex"><view class="item-left"></view> <view class="item-right">我的工具</view> </view>
							<view class="flex flex-wrap">
                <view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/tabbar-4/workEssay?type=1')">
                  <view class="image-blue"><image src="/static/images/A1fw.png" class="png" mode="aspectFit"></image></view>
                  <text class="text-grey">工作范文</text>
                </view>
                <view class="item basis-xs25 radius"  @tap="goPage('/pages/tabbar/tabbar-4/workEssay?type=3')">
                  <view class="image-blue"><image src="/static/images/A2ht.png" class="png" mode="aspectFit"></image></view>
                  <text class="text-grey">合同样本</text>
                </view>
                 <view class="item basis-xs25 radius" @tap="goPageWith('/pages/tabbar/tabbar-4/workEssay?type=4')">
<!--                <view class="item basis-xs25 radius" @tap="needDo()">-->
                  <view class="image-blue"><image src="/static/images/A3zd.png" class="png" mode="aspectFit"></image></view>
                  <text class="text-grey">制度模板</text>
                </view>
                 <view class="item basis-xs25 radius" @tap="goPageWith('/pages/tabbar/tabbar-4/workEssay?type=2')">
<!--                <view class="item basis-xs25 radius" @tap="needDo()">-->
                  <view class="image-blue"><image src="/static/images/A4bd.png"  class="png" mode="aspectFit"></image></view>
                  <text class="text-grey">表单样本</text>
                </view>

                <view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/company/injury')">
                  <view class="image-blue"><image src="/static/images/B1gs.png" class="png" mode="aspectFit"></image></view>
                  <text class="text-grey">工伤测算</text>
                </view>
                <view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/company/personTax')">
                  <view class="image-blue"><image src="/static/images/B2gs.png" class="png" mode="aspectFit"></image></view>
                  <text class="text-grey">个税测算</text>
                </view>
                <view class="item basis-xs25 radius" @tap="goPage('/pages/tabbar/company/socialArea')">
                  <view class="image-blue"><image src="/static/images/B3sb.png" class="png" mode="aspectFit"></image></view>
                  <text class="text-grey">社保对比</text>
                </view>
                <view class="item basis-xs25 radius" @tap="goPage('')">
                  <view class="image-blue"><image src="/static/images/B4jy.png" class="png" mode="aspectFit"></image></view>
                  <text class="text-grey">就业维权</text>
                </view>

							</view>

						</view>
					</view>
					<view class="grid flex-sub padding col-1">
						<view class="content flex-sub flex-wrap">
							<view class="item-titel flex" ><view class="item-left"></view>
							<view class="item-right"> 服务平台</view></view>
							<view class="flex flex-wrap">
                <view class="item basis-xs25 radius" v-for="(item,index) in serviceList" :key="index" @click="goAreaPage(item)">
                  <view class="image-blue"><image :src="item.thumb" class="png" mode="aspectFit"></image></view>
                  <text class="text-grey">{{item.title}}</text>
                </view>

								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
    <!-- 绑定 -->
    <goReg
      ref="goReg"
      :contentHeight="580"
    ></goReg>
	</view>
</template>
<script>
	import listCell from '@/components/mix-list-cell';

	// import {
	// 	mapState
	// } from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell,
		},
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				uId:0,
        names:['失宠的猫','淡述昔情','绝尘映雪','阳间幕宾','櫻花之戀','亦难幸福','多心病患','梅芳竹清','半杯可乐','夜店情殇','瞬间灰色','烟雾弥漫','像个少女','烟草味道','無怨無悔','甜甜微笑'],
        userInfo:{},
        serviceList:[],
			}
		},
		onShow() {
			this.uId = uni.getStorageSync('userId');

			console.log(this.uId)
      this.getService()
			if(this.uId>"0"&&this.uId!=undefined){
				// this.userInfo = uni.getStorageSync('userInfo');
				this.getUserInfo();
				return;
			}


			this.$refs.goReg.showModal('regModal');

			// this.getUserInfo();
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
		// computed: {
			// ...mapState(['hasLogin', 'userInfo'])
		// },
		methods: {
			Bind(){
				console.log('in Bind')
				this.getUserInfo();
			},
			async getUserInfo(){
				console.log('in getUserInfo')
				this.uId = uni.getStorageSync('userId');
				let uId = this.uId;
				let data = await this.$http.get(
					'wx/job_seekers/'+uId,
				);
				console.log(data);
				this.userInfo = data;
				uni.setStorageSync('userInfo',data);
				uni.setStorageSync('userRoles',data.roles);
				// console.log(uni.getStorageSync('userInfo'))
				// this.$forceUpdate()
			},
			async getService(){
				console.log('in getService')
				this.uId = uni.getStorageSync('userId');
				let uId = this.uId;
				let data = await this.$http.get(
					'wx/serviceList/',
				);
				console.log(data);
				this.serviceList = data;
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
			needDo(){
				uni.showToast({
					title: `功能开发中...`,
					icon: 'none'
				})
				return
			},
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			goPage(page){
        // uni.showToast({
        //   title:'敬请期待...',
        //   icon:'none',
        // })
        // return;
				uni.navigateTo({
					url: page
				})
				return;

			},
			goAreaPage(item){
        // uni.showToast({
        //   title:'敬请期待...',
        //   icon:'none',
        // })
        // return;
				let uId = uni.getStorageSync('userId');
				// let uId =1;
				if(uId>"0"&&uId!=undefined){

					uni.navigateTo({
						url: '/pages/tabbar/company/service?t='+item.title
					})
					return;
				}

				this.$refs.goReg.showModal('regModal');

				return;

			},
			goPageWith(page){
				let uId = uni.getStorageSync('userId');
				// let uId =1;
				if(uId>"0"&&uId!=undefined){
					uni.navigateTo({
						url: page
					})
					return;
				}

				this.$refs.goReg.showModal('regModal');

				return;

			},
		}
	}
</script>
<style lang='scss'>
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section{
		height: 270upx;
		position:relative;

		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 270upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		background-image: url(../../../static/images/fwpt.png);
		background-repeat:no-repeat;
		background-size: cover;
		.portrait{
			width: 130upx;
			height: 130upx;
			margin-left: 10px;
			border:5upx solid #fff;
			border-radius: 50%;
			overflow: hidden;
		}
		.username{
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}
		.info-box{
			display: grid;
			padding-left: 20px;
		}
		&:after{
			position: absolute;
			top: 0;
			right: 14px;
			bottom: 0;
			display: block;
			margin: auto;
			width: 14px;
			height: 14px;
			color: #8799a3;
			content: "\e6a3";
			text-align: center;
			font-size: 16px;
			font-family: cuIcon;
			line-height: 14px;
		}
	}

	.col-1{
		border-radius: 6px;
		margin-top: 10px;
		background-color: #FFFFFF;
	}
	.container{
		font-size: 14px;
	}
	.cover-container {
		padding: 0;
		position: relative;
		/* background: #F2F6F8 !important; */
		padding-bottom: 20upx;
		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
		.cu-item{
			background-color: #f1f1f1 !important;
			margin: 0 10px;
		}
	}

	.item-titel {
		font-size: 16px;
		margin-bottom: 10px;
		padding-left: 5px;
		image{
			display: inline-block;
			margin-right: 5px;
			width: 1.6em;
			height: 1.6em;
			vertical-align: middle;
		}
	}

	.item-left{
		width: 21px;
		height: 21px;
		margin-right: 5px;
		background: #C1D4E5;
		border-radius: 50%;
	}
	.item-right{
		color:#FFF;
		font-size:14px;
		width:100%;
		padding: 0 10px;
		height: 20px;
		background: #C1D4E5;
		border-radius: 10px;
    line-height: 20px;
	}
	.item {
		display: grid;
		text-align: center;
		/*height: 160upx;*/
		align-items: center;
		justify-items: center;
		font-size:12px;
		color:#333;
		.image-green{
			width: 42px;
			height: 42px;
			align-items: center;
			display: flex;
			border-radius: 50%;
			background: linear-gradient(180deg, #D2F60E 0%, #26CC0C 100%);
		}
		.image-blue{
			width: 42px;
			height: 42px;
			align-items: center;
			display: flex;
			/*border-radius: 50%;*/
			/*background: linear-gradient(180deg, #52B9FE 0%, #624CFE 100%);*/
		}
		.image-light{
			width: 42px;
			height: 42px;
			align-items: center;
			display: flex;
			border-radius: 50%;
			background: linear-gradient(180deg, #4CFECE 0%, #4CA5FE 100%);
		}
		.image-yellow{
			width: 42px;
			height: 42px;
			align-items: center;
			display: flex;
			border-radius: 50%;
			background: linear-gradient(180deg, #FEF24C 0%, #FE7D4C 100%);
		}
		image {
			width: 100%;
      height: 100%;
			/*height: 21px;*/
		}
		.text-black{
			height:40px;
		}
	}

	.basis-xs25 {
		flex-basis: 25%;
		margin-top: 15px;
		margin-bottom: 10px;
	}

	.text-btn{
		font-size: 16px;
		height: 30px;
		line-height: 30px;
	}
	.text-img{
		width: 95px;
		height: 100px;
		position: absolute;
		right: 20px;
		bottom: 5px;
	}
	.new-img{
		width: 95px;
		height: 100px;
		position: absolute;
		right: 20px;
		bottom: 90px;
	}
	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.padding{
		padding: 10px;
	}

</style>
